﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>拼音翻译</title>
    <link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body class="pos-r">
<div class="center-div">
    <div class="page-container">
        <div class="text-c"> 输入句子：
            <input type="text" onkeypress="enterQuery(event)" id="query" placeholder=" 句子" style="width:150px" class="input-text">
            <button name="" id="" class="btn btn-success" onclick="queryPinyin('/GetTaiwanPinyin')"><i class="Hui-iconfont">&#xe665;</i> 翻译
            </button>
        </div>
        <div class="mt-20">
            <table id="pyResultTable" class="table table-border table-bordered table-bg table-hover">
                <thead>
                <tr class="text-c">
                    <th width="60">中文词</th>
                    <th width="100">台湾拼音</th>
                    <th width="100">中国拼音</th>
                    <th width="200">拼音对照</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    body {TEXT-ALIGN: center;}
    .center-div { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
</style>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">

//    $("queryPinyin").get("http://43.241.225.251:9999/GetTaiwanPinyin", {query:document.getElementById("query").value})

    var xmlhttp;

    function onQueryPinyin() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//            alert(xmlhttp.status);
//            alert(xmlhttp.responseText);
            var response = xmlhttp.responseText;
            var json = JSON.parse(response);
            var data = json.data;
            var table = document.getElementById("pyResultTable");
            table.tBodies[0].innerHTML="";
            for (var i = 0; i < data.length; i++) {
                var tr = document.createElement('tr');
                tr.setAttribute("class", "text-c va-m");
                var td = document.createElement("td");
                td.innerHTML = data[i].word;
                tr.appendChild(td);
                var td = document.createElement("td");
                td.innerHTML = data[i].twPinyin;
                tr.appendChild(td);
                var td = document.createElement("td");
                td.innerHTML = data[i].pinyin;
                tr.appendChild(td);
                var td = document.createElement("td");
                td.innerHTML = data[i].compare;
                tr.appendChild(td);
                table.tBodies[0].appendChild(tr);
            }
        }
    }

    function queryPinyin(url) {
        var query = "?query=" + document.getElementById("query").value;

        xmlhttp=null;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xmlhttp != null) {
            xmlhttp.onreadystatechange = onQueryPinyin;
            xmlhttp.open("GET", url + query, true);
            xmlhttp.send(null);
        }
    }

    function enterQuery(event) {
        if(event.keyCode == 13) {  // enter
            queryPinyin("/GetTaiwanPinyin");
        }
    }

</script>
</body>
</html>